<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <h1>留言板</h1>
        <div class="content">
            <span style="color: #fff; font-size: 1.4rem;">标 &nbsp;&nbsp;&nbsp; 题:</span>
            <input id="title1" style="width: 19rem; height: 2rem; margin-top: 1rem; margin-left: 2rem;" type="text"><br>
            <span style="color: #fff; font-size: 1.4rem;" class="nei">留言内容:</span>
            <!-- <input id="content1" style="width: 11rem; height: 2rem; margin-top: 1rem; margin-left: 1.2rem;" type=""> -->
            <textarea name="" id="content1" cols="43" rows="6"
                style=" margin-top: 1rem; margin-left: 7.5rem;"></textarea>
            <br>
            <span style="color: #fff; font-size: 1.4rem;">留&nbsp; 言&nbsp; 人:</span>&nbsp;&nbsp;&nbsp;
            <input id="name1" style="width: 19rem; height: 2rem; margin-top: 1rem; " type="text"><br>
            <button id="btn">发布留言</button>
        </div>
        <div id="large">
            <h1>留言列表</h1><br>
            <!-- <hr> -->
            <div id="Fame">
                <!-- <div id="big">
                    <p>留言人: <span id="title"></span></p>
                    <p>留言标题: <span id="content"></span></p>
                    <p>留言内容: <span id="name"></span><img src="" alt=""></p>
                    <div>
                        <span>留言时间:</span>
                    </div>
                </div> -->
            </div>

        </div>

    </div>
</body>
<script src="ajax.js"></script>
<script>
    window.onload = function () {
        //显示
        show()
        //添加
        btn.onclick = add
    }
    function show() {
        ajax({
            type: 'get',
            url: 'https://liu.zzgoodqc.cn/lyb/list',
            success: function (res) {
                console.log(res);
                str = ''
                for (let i in res.data) {
                    str += `
                            <hr>
                            <div id="big">
                                <p>留言人: <span id="title">${res.data[i].name}</span></p>
                                <p>留言标题: <span id="content">${res.data[i].title}</span></p>
                                <p>留言内容: <span id="name">${res.data[i].content}</span><img id="Image" src="http://pic.bizhi360.com/bpic/53/11153.jpg" alt=""></p>
                                <div class='shi'>
                                    <span>留言时间:${res.data[i].updated_at}</span><button class='de' onclick='del(${res.data[i].id})'>删除</button>
                                </div>
                            </div>
                            
                            `
                }
                document.getElementById('Fame').innerHTML = str
            }

        })
    }
    //添加
    function add() {
        let data = {
            title: title1.value,
            content: content1.value,
            name: name1.value,
        }
        // console.log(data);
        ajax({
            type: 'POST',
            url: 'https://liu.zzgoodqc.cn/lyb/add',
            data: data,
            success: function (res) {
                console.log(res);
                show()
            }
        })
    }
    //删除
    function del(id) {
        ajax({
            type: 'get',
            url: 'https://liu.zzgoodqc.cn/lyb/del?id=' + id,
            success: function (res) {
                console.log(res);
                console.log(123);
                if (res.code == 200) {
                    // var content;
                    // if (confirm("确定 & 取消")) { //if语句内部判断确认框
                        //1							//若点击了确认，返回true，执行1
                        // content_true = "您选择了确定";
                        // document.write(content_true)
                        // window.location.reload()
                    // }

                }
                //  else {
                //     //若点击了取消，则返回false，执行2
                //     content_false = "您选择了取消";
                //     // document.write(content_false)
                // }

            }
        })
    }
</script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
    }

    h1 {
        width: 50%;
        height: 3rem;
        /* background-color: aquamarine; */
        text-align: center;
        line-height: 3rem;
        margin: auto;
    }

    .content {
        width: 50%;
        height: 20rem;
        /* background-color: chartreuse; */
        background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
        text-align: center;
        /* line-height: 4rem; */
        margin: auto;
        position: relative;
        top: 0;
        left: 0;
    }

    #btn {
        width: 11rem;
        height: 3rem;
        color: #fff;
        font-size: 1.5rem;
        /* background-color: chartreuse; */
        background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
        border: none;
        margin-top: 1rem;
    }

    #large {
        width: 50%;
        height: 100%;
        /* background-color: aquamarine; */
        /* text-align: center; */
        /* line-height: 4rem; */
        margin: auto;
    }

    #Fame {
        width: 100%;
        height: 100%;
        /* background-color: aquamarine; */
        /* text-align: center; */
        /* line-height: 4rem; */
        margin: auto;
    }

    hr {
        width: 80%;
        height: 1px;
        margin: auto;
        border-bottom: 2px solid #ccc;
        border-top: none;
        border-left: none;
        border-right: none;
        margin-top: 1rem;
    }

    #big {
        width: 70%;
        height: 13rem;
        background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
        color: #fff;
        margin: auto;
        position: relative;
        top: 0;
        left: 0;
    }

    #big p {
        margin-top: 1rem;
        margin-left: 1rem;
    }

    #Image {
        width: 16rem;
        height: 9rem;
        position: absolute;
        top: 1rem;
        left: 16rem;
    }

    .shi {
        position: absolute;
        top: 11rem;
        left: 15rem;
    }

    a {
        text-decoration: none;
    }

    .de {
        width: 3rem;
        height: 1.5rem;
        border: none;
        background-color: none;
        color: #6654F1;
        margin-left: 3px;
    }

    .nei {
        position: absolute;
        top: 4rem;
        left: 11.7rem;
    }
</style>

</html>